<!-- JSON数据生成器 -->
<template>
	<div class='json-data-generator'>
		<el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">添加数据</el-button>
		<el-form-item v-for="(item,index) in form" :key="index" class="json-data__item" size="small">
			<el-input v-model="item.key" placeholder="参数名,英文字段" @blur="update"></el-input>
			<el-input v-model="item.value" placeholder="值" @blur="update"></el-input>
			<el-button type="danger" plain @click="handleDelete(index)" size="mini" circle icon="el-icon-minus"></el-button>
		</el-form-item>
	</div>
</template>

<script>
export default {
	props:{
		value: {
			type: String,
			default: ''
		}
	},
	components: {},
	data() {
		//这里存放数据
		return {
			form: []
		};
	},
	//监听属性 类似于data概念
	computed: {},
	//监控data中的数据变化
	watch: {
		value: {
			deep: true,
			immediate: true,
			handler(val) {
				if(val!= null && val.length > 0){
					this.form = JSON.parse(val);
				}else{
					this.form = [];
				}
			}
		}
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {

	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {

	},
	//方法集合
	methods: {
		handleAdd(){
			this.form.push({
				key: '',
				value: ''
			});
		},
		handleDelete(index){
			this.form.splice(index,1);
			this.update()
		},
		update(){
			console.log(this.form)
			this.$emit("input",JSON.stringify(this.form));
		}
	},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.json-data-generator{

		.json-data__item{
			margin-top:6px;
			margin-bottom:0;
			::v-deep .el-form-item__content{
				display: flex;
				align-items: center;
				.el-input{
					width: 150px;
					margin-right:10px;
					&+.el-input{
						width:300px;
					}
				}
			}
			
		}
}
</style>